<template>
  <div class="page-container-padding">
    <div class="index-form">
      <div class="page-title">新建系统品种</div>
      <el-form label-width="80px" size="mini">
        <el-form-item label="名称">
          <el-input v-model="newObj.name" placeholder="品种名称"></el-input>
        </el-form-item>
        <el-form-item label="代码">
          <el-input
            v-model="newObj.code"
            placeholder="品种在系统中的唯一性代码，优先使用交易代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="报价单位">
          <el-input
            v-model="newObj.price_unit"
            placeholder="品种的报价单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属组别">
          <el-select
            v-model="newObj.group_id"
            placeholder="品种所属的分组"
            style="width: 100%"
          >
            <el-option :value="2" label="能源化工" />
            <el-option :value="3" label="有色金属" />
            <el-option :value="4" label="黑色系" />
            <el-option :value="5" label="农产品" />
            <el-option :value="6" label="经济数据" />
            <el-option :value="8" label="金融期货" />
          </el-select>
        </el-form-item>
        <el-form-item label="适用范围">
          <el-select
            v-model="newObj.scope"
            multiple
            placeholder="选择品种适用的范围"
            style="width: 100%"
          >
            <el-option
              v-for="s in scopeList"
              :key="s.key"
              :value="s.key"
              :label="s.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="交易所">
          <el-switch
            v-model="newObj.is_exchange"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="toCreate">确定添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import {
    CreateNewVariety,
    RetrieveVarietyScopes,
  } from '@/api/adminRuizhi/common'
  export default {
    data() {
      return {
        scopeList: [],
        newObj: {
          name: '',
          code: '',
          price_unit: '',
          group_id: null,
          scope: [],
          is_exchange: 0,
        },
      }
    },
    mounted() {
      RetrieveVarietyScopes().then((res) => {
        this.scopeList = res.data
      })
    },
    methods: {
      toCreate() {
        const bodyData = { ...this.newObj }
        bodyData.scope = this.newObj.scope.join(',')
        CreateNewVariety(bodyData).then((res) => {
          this.newObj.name = ''
          this.$baseMessage(res.message, 'success')
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .page-title {
    color: #ff5f0e;
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 16px;
  }
  .index-form {
    width: 600px;
    margin: 0 auto;
  }
</style>
